<template>
	<view class="content padding">
		<view v-for="(item,index) in orderList" :key="index" :class="[index==0?'order-item-first':'order-item']" @tap="goDetail(item.id)">
			<view class="order-top">
				<view class="text-label">
					订单编号
				</view>
				<view class="text-no">{{item.orderNo}}</view>
			</view>
			<view class="order-datail-item">
				<view v-for="(item2,index2) in item.orderItemVos" :key="index2" :class="[index2!=0?'margin':'']">
					<image :src="item2.image" class="order-item-img"></image>
					<view class="order-item-right">
						<view class="order-item-text">
							<view class="order-item-name text_two">{{item2.productName}}</view>
							<view class="order-item-price">¥ {{item2.price}}</view>
						</view>
						<view class="order-item-text">
							<view class="order-item-sku text_one">{{item2.skuName}}</view>
							<view class="order-item-sku-num">x {{item2.count}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="refund-msg">{{item.refundStatusMsg}}</view>
		</view>
	</view>
</template>

<script>
	import api from "../../common/api.js"
	import {
		getWithParam_
	} from "../../common/request.js";
	export default {
		data() {
			return {
				index: 1,
				pageSize: 10,
				orderList: [],
				loadMore: true
			}
		},
		onLoad() {
			this.getOrderList()
		},
		onReachBottom() {
			if (this.loadMore) {
				this.index++
				this.getOrderList()
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: "./refundDetail?id=" + id
				})
			},
			getOrderList() {
				getWithParam_(api.ORDER_REFUND_LIST, {
					index: this.index,
					pageSize: this.pageSize
				}).then(res => {
					if (res.data == null || res.data.length < 10) {
						this.loadMore = false
					}
					this.orderList = this.orderList.concat(res.data)
				})
			}
		}
	}
</script>

<style>
	.refund-msg {
		padding-top: 20upx;
		border-top: 3upx solid #F2F3F5;
		color: #FE0338;
		font-size: 32upx;
	}

	.order-item-sku-num {
		color: #333333;
		font-size: 24upx;
		margin-top: 20upx;
	}

	.order-item-sku {
		margin-top: 20upx;
		color: #555555;
		font-size: 24upx;
	}

	.order-item-price {
		font-size: 32upx;
		color: #333333;
	}

	.order-item-text {
		justify-content: space-between;
		align-items: flex-start;
	}

	.order-item-name {
		width: 350upx;
		color: #333333;
	}

	.order-item-right {
		flex: 1;
		margin-left: 20upx;
		margin-top: 10upx;

		flex-direction: column;
	}

	.order-item-img {
		width: 180upx;
		height: 180upx;
	}

	.order-datail-item {
		width: 100%;
		padding: 20upx 0;
		flex-direction: column;
	}

	.text-no {
		font-size: 24upx;
		color: #888888;
		margin-left: 20upx;
	}

	.text-label {
		font-size: 24upx;
		color: #333333;
	}

	.order-item-first {
		padding: 20upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		flex-direction: column;
		border-radius: 20upx;
	}

	.order-item {
		margin-top: 30upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		flex-direction: column;
		border-radius: 20upx;
	}

	.order-top {
		padding-bottom: 20upx;
		border-bottom: 3upx solid #F2F3F5;
	}
</style>
